<template>
  <div style="display: flex">
    <div ref="age" style="width: 33%; height: 300px"></div>
    <div ref="address" style="width: 33%; height: 300px"></div>
    <div ref="type" style="width: 33%; height: 300px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getAreaData, getTreeKindData, getYearData } from "@/api/statistic.js";
export default {
  name: "VueAdminTemplateMasterIndex",

  data() {
    return {
      areaData: [],
    };
  },

  mounted() {
    getAreaData().then((res) => {
      this.drawAddress(res);
    });
    getTreeKindData().then((res) => {
      this.drawType(res);
    });
    getYearData().then((res) => {
      this.drawAge(res);
    });
  },

  methods: {
    drawAge(data) {
      const age = this.$refs.age;
      var myChart = echarts.init(age);
      const option = {
        grid: {
          top: "50%",
          right: "50%",
        },
        //环状图中央总数
        graphic: {
          type: "text",
          left: "center",
          top: "center",
          style: {
            text: "年龄统计", // 显示总和数据
            textAlign: "center",
            fill: "#000", // 文本颜色
            fontSize: 20,
          },
        },
        tooltip: {
          trigger: "item",
          formatter: (param) => {
            return `${param.name}：${param.value}个(${param.percent.toFixed(
              1
            )}%)`;
          },
        },
        series: [
          {
            type: "pie",
            radius: ["30%", "50%"],
            avoidLabelOverlap: false,
            data: data,
            label: {
              show: true,
              formatter: function (params) {
                // 此处69需要获取数据后计算总数
                return params.name + "  " + params.value + "颗";
              },
            },
            lableLine: {
              show: false,
            },
          },
        ],
      };
      myChart.clear();
      myChart.setOption(option, true);
    },
    drawAddress(data) {
      const address = this.$refs.address;
      var myChart = echarts.init(address);
      const option = {
        grid: {
          top: "50%",
          right: "50%",
        },
        //环状图中央总数
        graphic: {
          type: "text",
          left: "center",
          top: "center",
          style: {
            text: "区域统计", // 显示总和数据
            textAlign: "center",
            fill: "#000", // 文本颜色
            fontSize: 20,
          },
        },
        tooltip: {
          trigger: "item",
          formatter: (param) => {
            return `${param.name}：${param.value}个(${param.percent.toFixed(
              1
            )}%)`;
          },
        },
        series: [
          {
            type: "pie",
            radius: ["30%", "50%"],
            avoidLabelOverlap: false,
            data: data,
            label: {
              show: true,
              formatter: function (params) {
                // 此处69需要获取数据后计算总数
                return params.name + "  " + params.value + "颗";
              },
            },
            lableLine: {
              show: false,
            },
          },
        ],
      };
      myChart.clear();
      myChart.setOption(option, true);
    },
    drawType(data) {
      const type = this.$refs.type;
      var myChart = echarts.init(type);
      const option = {
        grid: {
          top: "50%",
          right: "50%",
        },
        //环状图中央总数
        graphic: {
          type: "text",
          left: "center",
          top: "center",
          style: {
            text: "类型统计", // 显示总和数据
            textAlign: "center",
            fill: "#000", // 文本颜色
            fontSize: 20,
          },
        },
        tooltip: {
          trigger: "item",
          formatter: (param) => {
            return `${param.name}：${param.value}个(${param.percent.toFixed(
              1
            )}%)`;
          },
        },
        series: [
          {
            type: "pie",
            radius: ["30%", "50%"],
            avoidLabelOverlap: false,
            data: data,
            label: {
              show: true,
              formatter: function (params) {
                // 此处69需要获取数据后计算总数
                return params.name + "  " + params.value + "颗";
              },
            },
            lableLine: {
              show: false,
            },
          },
        ],
      };
      myChart.clear();
      myChart.setOption(option, true);
    },
  },
};
</script>
